<template>
  <div>
    <el-steps :active="currStep" align-center class="step">
      <el-step
        v-for="item in stepList"
        :key="item.id"
        :title="item.label"
        :description="item.description"
      ></el-step>
    </el-steps>
    <div class="info" v-loading="infoLoading">
      <div>
        当前订单状态：
        <el-tag type="primary" v-if="info.transaction_status == 0"
          >待支付</el-tag
        >
        <el-tag
          type="warning"
          v-if="info.marketing_type == 2 && info.effective == false"
          >待成团</el-tag
        >
        <el-tag
          type="warning"
          v-if="info.transaction_status == 1 && info.effective"
          >{{ info.shipment_mode == 1 ? '待备货' : '待发货' }}</el-tag
        >
        <el-tag type="danger" v-if="info.transaction_status == 3">{{
          info.shipment_mode == 1 ? '待自提' : '待收货'
        }}</el-tag>
        <el-tag type="success" v-if="info.transaction_status == 5"
          >交易完成</el-tag
        >
        <el-tag type="info" v-if="info.transaction_status == 6">关闭</el-tag>
      </div>
      <el-form class="form" ref="info" inline :model="info">
        <div>
          <div class="title">基本信息</div>
          <el-form-item label="订单编号：">
            <div>{{ info.order_code }}</div>
          </el-form-item>
          <el-form-item label="支付方式：">
            <span class="platformpay" v-if="info.exchange"> 积分兑换</span>
            <span class="" v-if="info.exchange && info.total_amount > 0">
              +</span
            >
            <span
              v-if="info.total_amount > 0"
              :class="
                info.pay_mode == 1
                  ? 'wechatpay'
                  : info.pay_mode == 2
                  ? 'alipay'
                  : 'platformpay'
              "
            >
              <!-- {{
                info.pay_mode == 1
                  ? "微信支付"
                  : info.pay_mode == 2
                  ? "支付宝支付"
                  : "余额支付"
              }} -->
              <span v-if="info.pay_mode == 0">余额支付</span>
              <span v-if="info.pay_mode == 1">微信支付</span>
              <span v-if="info.pay_mode == 2">支付宝支付</span>
              <span v-if="info.pay_mode == 3">银行线下支付</span>
              <span v-if="info.pay_mode == 4">现金支付</span>
              <span v-if="info.pay_mode == 5">积分支付</span>
              <span v-if="info.pay_mode == 6">积分 + 余额 支付</span>
              <span v-if="info.pay_mode == 7">积分 + 微信 支付</span>
              <span v-if="info.pay_mode == 8">积分 + 支付宝 支付</span>
              <span v-if="info.pay_mode == 9">公益积分支付</span>
              <span v-if="info.pay_mode == 10">支付宝支付(Adapay)</span>
              <span v-if="info.pay_mode == 12">支付宝支付(慧收钱)</span>
              <span v-if="info.pay_mode == 14">银行卡支付</span>
            </span>
          </el-form-item>
          <el-form-item label="支付订单号：">
            <div>{{ info.pay_order_code }}</div>
          </el-form-item>
          <el-form-item label="订单类型：">
            <div>
              {{
                info.marketing_type == 1
                  ? '秒杀订单'
                  : info.marketing_type == 2
                  ? '拼团订单'
                  : '商家订单'
              }}
            </div>
          </el-form-item>
          <el-form-item label="配送方式：">
            <div>{{ info.shipment_mode == 1 ? '自提' : '物流' }}</div>
          </el-form-item>
          <el-form-item label="订单来源：">
            <div>
              {{
                info.channel_type == 1
                  ? '微信小程序'
                  : info.channel_type == 2
                  ? 'APP'
                  : '系统自动'
              }}
            </div>
          </el-form-item>
          <el-form-item label="订单可得贡献值：">
            <!-- <div>{{ info.final_give_back_point }}</div> -->
            <div>{{ isToFixed(info.final_consumption_value, 2) }}</div>
          </el-form-item>
          <el-form-item label="下单备注：">
            <div>{{ info.user_remark }}</div>
          </el-form-item>
        </div>

        <div v-if="info.receipt">
          <div class="title">收货人信息</div>
          <el-form-item label="收货人：">
            <div>{{ info.receipt.receiver }}</div>
          </el-form-item>
          <el-form-item label="联系方式：">
            <div>{{ info.receipt.mobile }}</div>
          </el-form-item>
          <el-form-item label="地区：">
            <div>
              {{ info.receipt.province_name }}{{ info.receipt.city_name
              }}{{ info.receipt.area_name }}{{ info.receipt.street_name
              }}{{ info.receipt.community_name }}
            </div>
          </el-form-item>
          <el-form-item label="收货地址：">
            <div>{{ info.receipt.address }}</div>
          </el-form-item>
        </div>

        <div v-if="info.self_take">
          <div class="title">自提信息</div>
          <el-form-item label="自提人：">
            <div>{{ info.self_take.receiver }}</div>
          </el-form-item>
          <el-form-item label="联系方式：">
            <div>{{ info.self_take.mobile }}</div>
          </el-form-item>
        </div>

        <div>
          <div class="title">商品信息</div>
          <el-table
            border
            :data="info.child_order_list"
            style="width: 100%; margin-top: 15px"
          >
            <el-table-column prop="date" label="商品图片" align="center">
              <template slot-scope="scope">
                <div>
                  <img class="goods-img" :src="scope.row.goods_img" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="goods_title" label="商品名称" align="center">
            </el-table-column>
            <el-table-column
              prop="original_real_price"
              label="价格"
              align="center"
              ><template slot-scope="scope">
                <div v-if="scope.row.exchange">
                  {{ scope.row.exchange_point }}积分
                </div>
                <div v-else>
                  {{ scope.row.original_real_price }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="sku_set_name" label="属性" align="center">
            </el-table-column>
            <el-table-column label="数量" align="center">
              <template slot-scope="scope">
                {{ scope.row.number }}/{{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column prop="real_price" label="小计" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.exchange">
                  {{ scope.row.total_point }}积分
                </div>
                <div v-else>
                  {{ (scope.row.real_price * scope.row.number).toFixed(2) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="real_price" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="commission(scope.row)"
                  >查看分佣</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="count">
            <label class="freight" v-if="info.first_order_reduced"
              >首单优惠：<label>￥{{ info.first_order_reduced }}</label></label
            >
            <label class="ml10 freight">{{
              info.real_freight ? '运费：￥' + info.real_freight : '免运费'
            }}</label>
            <label
              class="ml10 freight"
              v-if="info.platform_coupon_name && info.platform_coupon_sharing"
              >优惠券名称:{{ info.platform_coupon_name }}</label
            >
            <label
              class="ml10 freight"
              v-if="info.platform_coupon_name && info.platform_coupon_sharing"
              >优惠券优惠金额:{{ info.platform_coupon_sharing }}</label
            >
            <label v-if="info.total_amount > 0"
              >商品合计：<label class="price"
                >￥{{ info.total_amount }}
              </label></label
            >
            <label v-if="info.total_point > 0"
              >实付积分：<label>{{ info.total_point }}</label></label
            >
          </div>
        </div>
        <div v-if="info.marketing_type == 2">
          <div class="title">拼团信息</div>
          <el-table :data="peopleTable" border>
            <el-table-column
              property="nickname"
              label="人员"
              width="150"
            ></el-table-column>
            <el-table-column
              property="order_code"
              label="订单编号"
              width="200"
            ></el-table-column>
            <el-table-column property="leader" label="身份">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.leader">团长</el-tag>
                <el-tag type="success" v-else>团员</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              property="create_time"
              label="下单时间"
            ></el-table-column>
          </el-table>
        </div>
      </el-form>
    </div>

    <div>
      <el-dialog
        title="分佣信息"
        :visible.sync="dialogTableVisible"
        append-to-body
        width="1000px"
      >
        <div class="title">分佣信息</div>
        <el-table :data="gridData" border>
          <el-table-column property="date" label="商品图片" width="300">
            <template slot-scope="scope">
              <div style="display: flex; align-items: center">
                <img
                  :src="scope.row.goods_img"
                  style="width: 100px; height: 100px"
                />
                <div>
                  <p>{{ scope.row.goods_title }}</p>
                  <p>{{ scope.row.sku_set_name }}x{{ scope.row.number }}</p>
                  <p>{{ scope.row.real_price }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            property="sale_price"
            label="销售价格"
            width="200"
          ></el-table-column>
          <el-table-column property="order_status" label="结算状态">
            <!-- 		   <template slot-scope="scope" v-if="scope.row.settlement==true">已结算</template>
		    <template slot-scope="scope" v-if="scope.row.settlement==false"  >未结算</template> -->
            <!--     <div v-if="scope.row.settlement==true">已结算</div>
      <div v-if="scope.row.settlement==false">未结算</div> -->
          </el-table-column>
          <el-table-column
            property="settlement_time"
            label="结算时间"
          ></el-table-column>
          <el-table-column property="address" label="分佣人信息">
            <template slot-scope="scope">
              {{ scope.row.distribution_user_name }} /
              {{ scope.row.distribution_user_mobile }}
            </template>
          </el-table-column>
          <el-table-column
            property="able_gains"
            label="实际分佣金额"
          ></el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
import serviceApione from '@/api/serviceApione.js'
export default {
  data() {
    return {
      stepList: [],
      info: {
        receipt: {}
      },
      currStep: null,
      infoLoading: false,
      dialogTableVisible: false,
      gridData: [],
      peopleTable: []
    }
  },
  methods: {
    commission(row) {
      this.dialogTableVisible = true
      serviceApione
        .getUserordergainsList({
          child_order_id: row.id
        })
        .then((res) => {
          if (res && res.data.code == 200) {
            this.gridData = res.data.page.list
          }
        })
    },
    init(value) {
      this.infoLoading = true
      console.log(value)
      this.info = value
      this.dealStepList(value)
    },

    dealStepList(v) {
      seviceApi
        .groupbuyTeammember({ team_id: v.sponsor_activity_id })
        .then((res) => {
          if (res && res.data.code == 200) {
            this.peopleTable = res.data.list
          }
        })
      this.stepList = []
      this.stepList = [
        {
          id: 0,
          label: '提交订单',
          description: v.format_order_time
        },
        {
          id: 4,
          label: '支付订单',
          description: v.format_pay_time ? v.format_pay_time : '未支付'
        }
      ]
      let arr = []
      if (v.shipment_mode) {
        // 自提
        arr = [
          {
            id: 1,
            label: '商家备货',
            description: v.format_auto_stock_up_last_time
              ? v.format_auto_stock_up_last_time
              : '待备货'
          },
          {
            id: 3,
            label: '确认提货',
            description: v.format_last_receipt_time
              ? v.format_last_receipt_time
              : '待提货'
          }
        ]
      } else {
        arr = [
          {
            id: 1,
            label: '商家发货',
            description: v.format_last_ship_time
              ? v.format_last_ship_time
              : '待发货'
          },
          {
            id: 3,
            label: '确认收货',
            description: v.format_last_receipt_time
              ? v.format_last_receipt_time
              : '待收货'
          }
        ]
      }
      this.stepList = [...this.stepList, ...arr]
      this.stepList.push({
        id: 5,
        label: '交易完成',
        description: v.format_complete_time ? v.format_complete_time : '未完成'
      })
      this.currStep = v.transaction_status
      if (v.transaction_status == 0) {
        this.currStep = 1
      } else if (v.transaction_status == 1) {
        this.currStep = 2
      } else if (v.transaction_status > 5) {
        this.currStep = null
      }
      this.infoLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.step {
  padding-bottom: 10px;
}

.info {
  padding-top: 10px;
  border-top: 6px solid #f1f1f1;
}

.form {
  margin-top: 10px;
  border-top: 1px solid #f1f1f1;
  padding: 10px 0;

  > div {
    margin-bottom: 20px;
  }

  .el-form-item {
    margin-right: 60px !important;
    margin-bottom: unset !important;
  }
}

.title {
  padding-left: 10px;
  border-left: 3px solid #17b3a3;
  line-height: 15px;
  font-size: 16px;
  margin: 5px 0;
  color: #333333;
}

.alipay {
  color: #009fe8;
}

.wechatpay {
  color: #1aad19;
}

.platformpay {
  color: #17b3a3;
}

.goods-img {
  width: 85px;
  height: 85px;
}

.count {
  padding: 10px 15px;
  border: 1px solid #ebeef5;
  border-top: unset;
  text-align: right;

  .freight {
    color: #b1b1b1;
    margin-right: 10px;
  }

  .price {
    color: #f3415f;
  }
}

.ml10 {
  margin-left: 10px;
}
</style>
